<template>
  <div>
      <p>type : {{ loong.type }}</p>
      <p>name: {{ loong.name }}</p>
      <p>age : {{ loong.age }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { onBeforeMount , onMounted } from 'vue';
import { onBeforeUpdate , onUpdated } from 'vue';
import { onBeforeUnmount , onUnmounted } from 'vue';
import { useRoute } from 'vue-router';

const loong = reactive( { type: '中国龙' , name: '' , age: ''} );
console.log( loong );

onBeforeMount( ()=>{
    console.log( '挂载前: ' , document.querySelectorAll('p') );
    const $route = useRoute();
    loong.name = $route.query.name;
    loong.age = $route.query.age;
});

onMounted( ()=>{
    console.log( '已挂载' , document.querySelectorAll('p') );
});

onBeforeUpdate( ()=>{
    console.log( '更新前' );
    const $route = useRoute();
    loong.name = $route.query.name;
    loong.age = $route.query.age;
});

onUpdated( ()=>{
    console.log( '已更新' );
});

onBeforeUnmount(()=>{
    console.table( '卸载前' );
});

onUnmounted( ()=>{
    console.table( '已卸载' );
});
</script>

<style>

</style>